<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="navbar">
			<nagatmy :images="img"></nagatmy>
		</view>

		<!-- 内容区域 -->
		<view class="content">
			<!-- 物品选择和数值显示区 -->
			<view class="item-selection">
				<view class="selection-title"></view>

				<!-- 带数值圆圈的物品展示 -->
				<view class="selected-item-container">
					<!-- 粒子背景效果 -->
					<view class="particle-background"></view>

					<!-- Canvas圆形进度条 -->
					<view class="circle-container">
						<canvas canvas-id="luckyCircle" class="lucky-circle"
							:style="{ width: circleSize + 'px', height: circleSize + 'px' }"></canvas>

						<!-- 圆圈中间显示选中的饰品图片 -->
						<view class="circle-item-image">
							<image :src="selectedItem.id ? selectedItem.cover : 'https://img.jingkakeji.com/img/static/lucky/noimg.png'"
								class="circle-img" alt="选中的饰品"></image>
						</view>

						<!-- 当前值显示在图片上方（优先级高） -->
						<view class="circle-center-value">
							{{ currentValue }}%
						</view>
					</view>
				</view>

				<!-- 进度条和金额显示 -->
				<view class="progress-section">
					<!-- 进度条容器，包含进度条和中间显示值 -->
					<view class="progress-container">
						<view class="slider-wrapper">
							<!-- 自定义进度条 -->
							<view class="custom-slider-container">
								<view class="custom-slider-track">
									<view class="custom-slider-progress" :style="{ 
                    width: currentValue + '%', 
                    backgroundColor: progressColor 
                  }"></view>
									<view class="slider-value-center">{{ currentValue }}%</view>
								</view>
								<view class="custom-slider-thumb" :style="{ 
                    left: currentValue + '%',
                    backgroundImage: 'url(' + sliderImage + ')',
                    backgroundSize: 'contain'
                  }" @touchstart="onThumbTouchStart" @touchmove="onThumbTouchMove" @touchend="onThumbTouchEnd"></view>
							</view>
						</view>
					</view>
				</view>
				<!-- 按钮区域 - 选择饰品和历史记录 -->
				<view class="tab-buttons">
					<view class="tab-button" :class="{ active: currentTab === 'items' }" @click="switchTab('items')">
						饰品列表
					</view>
					<view class="tab-button" :class="{ active: currentTab === 'history' }"
						@click="switchTab('history')">
						历史记录
					</view>
				</view>
				<view class="button-group">
					<!-- 切换按钮 -->


					<!-- 内容区域 -->
					<view class="content-area">
						<!-- 饰品列表 -->
						<view v-if="currentTab === 'items'" class="items-grid-three">
							<view class="item-card-three" v-for="(item, index) in sortedItems" :key="item.id || index"
								:class="{ 
              'selected': selectedItem.id === item.id
            }">
								<view class="prize-item" @click="selectItem(item)" :class="{ 
              'pressed': itemPress === item.id
            }" @touchstart="itemPress = item.id" @touchend="itemPress = null"
									:style="{ animationDelay: (index % 9) * 0.03 + 's' }">
									<view class="item-rare" :class="'rare-' + item.dura">
										{{ getRarityText(item.dura) }}
									</view>
									<view class="prize-image-wrapper">
										<image :src="item.cover || 'https://img.jingkakeji.com/img/static/default-item.png'" mode="aspectFill"
											:class="['prize-image', { 'item-selected-animation': itemSelectedAnimation }]"
											alt="饰品图片"></image>
										<view class="prize-label">
											<text class="label-quality"
												:style="{ visibility: item.dura_alias === '无' ? 'hidden' : 'visible' }">
												{{ item.dura_alias }}
											</text>
											<text class="label-name">{{ item.name }}</text>
										</view>
									</view>
									<view class="item-selected-mark" v-if="isSelected(item.id)">
										⌚
									</view>
								</view>
								<!-- 价格盒子 -->
								<view class="prize-price-box">
									<text class="prize-price-text">¥{{ item.bean }}</text>
								</view>
							</view>
						</view>

						<!-- 历史记录 -->
						<view v-if="currentTab === 'history'" class="drops-list">
							<view class="drop-item drop-item-animate" v-for="(drop, index) in (filteredDrops || [])"
								:key="index" :style="{ animationDelay: index * 0.05 + 's' }">
								<view class="drop-avatar">
									<image
										:src="(drop && drop.get_award && drop.get_award.cover) || 'https://img.jingkakeji.com/img/static/default-avatar.png'"
										mode="aspectFill" alt="用户头像">
									</image>
								</view>
								<view class="drop-info">
									<view class="drop-user">
										<span
											class="username">{{ (drop && drop.get_award && drop.get_award.name) || '未知物品' }}</span>
										<span
											class="time">{{ (drop && drop.get_award && drop.get_award.dura_alias) || '' }}</span>
									</view>
									<view class="drop-item-name">{{ (drop && drop.itemName) || '' }}</view>
								</view>

								<view class="drop-item-value">
									¥{{ (drop && drop.use_bean) || 0 }}
								</view>
							</view>
							<view v-if="!(filteredDrops && filteredDrops.length)" class="empty-state">
								<i class="fa fa-inbox"></i>
								<text>暂无历史记录</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>


		<!-- 开奖中提示 -->
		<view class="result-loading" v-if="showResultLoading">
			<view class="loading-content">
				<view class="loading-spinner"></view>
				<text class="loading-text">开奖中...</text>
			</view>
		</view>

		<!-- 中奖结果弹窗 -->
		<view class="popup-mask" v-if="showResultPopup" @click="closeResultPopup"
			:style="{ opacity: resultPopupOpacity }"></view>
		<view class="result-popup" v-if="showResultPopup" :style="{ 
        transform: `translateY(${resultPopupPosition}px)`,
        opacity: resultPopupOpacity
      }">
			<view class="result-popup-content">
				<!-- 弹窗标题 -->
				<view class="result-title">
					<text class="result-title-text"
						:class="{ 'gold-gradient': resultData.isWin, 'gray-gradient': !resultData.isWin }">{{ resultData.isWin ? '恭喜中奖！' : '很遗憾，未中奖' }}</text>
				</view>

				<!-- 物品展示 -->
				<view class="result-item-container">
					<view class="result-item-image-wrapper">
						<image :src="resultData.item.cover" class="result-item-image" mode="aspectFill"></image>
						<!-- 物品品质标签 -->
						<view class="result-item-quality" :class="{
							'quality-consumer': resultData.item.dura_alias === '消费级',
							'quality-industrial': resultData.item.dura_alias === '工业级',
							'quality-milspec': resultData.item.dura_alias === '军规级',
							'quality-restricted': resultData.item.dura_alias === '受限',
							'quality-classified': resultData.item.dura_alias === '保密',
							'quality-covert': resultData.item.dura_alias === '隐秘',
							'quality-extraordinary': resultData.item.dura_alias === '非凡',
							'quality-contraband': resultData.item.dura_alias === '违禁'
						}">
							{{ resultData.item.dura_alias }}
						</view>
					</view>

					<!-- 物品信息 -->
					<view class="result-item-info">
						<text class="result-item-name">{{ resultData.item.name }}</text>
						<view class="result-item-value">
							<text class="result-item-bean">{{ resultData.item.box_bean }}</text>
							<text class="result-item-bean-unit">豆子</text>
						</view>
					</view>
				</view>

				<!-- 中奖说明 -->
				<view class="result-description">
					<text class="result-desc-text">
						{{ resultData.isWin ? 
							`恭喜你获得了 ${resultData.item.name}！` : 
							`很遗憾，未中奖指定物品，你获得了 ${resultData.item.name}`
						}}
					</text>
				</view>

				<!-- 关闭按钮 -->
				<view class="result-close-btn" @click="closeResultPopup">
					<text class="result-close-text">确定</text>
				</view>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="action-bar">
			<view class="open-case-btn" @click="openCase" @touchstart="caseBtnPress = true"
				@touchend="caseBtnPress = false" :class="{ 'pressed': caseBtnPress }">
				<image style="width: 40rpx;height: 40rpx;" src="https://img.jingkakeji.com/img/static/lucky/mony.png" mode=""></image>
				{{currentPrice}} 开箱
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getluckyList
	} from "../../api/outOfTheFree/index.js"
	import {
		getluckyOpen,
		luckyopen
	} from "../../api/luckys/luckys.js"
	import nagatmy from "../../Component/navgatsmy/navgatsmy.vue"
	import {
		playSound
	} from "../../utils/soundSettings.js";
	export default {
		components: {
			nagatmy
		},
		data() {
			return {
				pointerMainSize: 8, // 主三角形大小
				pointerSubSize: 15, // 次三角形大小
				pointerColor: '#7869DA', // 指针颜色
				img: "https://img.jingkakeji.com/img/static/luckys.png",

				// 弹窗控制状态和动画属性
				showResultPopup: false, // 中奖结果弹窗

				// 中奖结果弹窗属性
				resultPopupPosition: 1000,
				resultPopupOpacity: 0,
				resultData: {
					isWin: false,
					item: {
						name: '',
						cover: '',
						dura_alias: '',
						box_bean: 0
					}
				},
				lastOpenResult: null, // 存储最后一次开箱接口返回的结果
				showResultLoading: false, // 显示开奖中提示
				itemSelectedAnimation: false, // 物品选择动画控制

				isDragging: {
					item: false,
					history: false,
					slider: false // 滑块拖动状态
				},

				// 按钮交互状态
				buttonPress: null,
				closeBtnPress: null,
				filterPress: null,
				typePress: null,
				priceFilterPress: false,
				sortPress: null,
				searchPress: false,
				itemPress: null,
				pagePress: null,
				caseBtnPress: false,

				// Canvas和背景图尺寸设置
				circleSize: 310, // 圆形画布大小
				circleLineWidth: 8, // 线条宽度
				circleRadius: 119, // 圆的半径
				circleDashLength: 30, // 虚线每段长度
				circleDashGap: 5, // 虚线间隙

				// 幸运饰品数据
				selectedItem: {}, // 默认为空对象，不选择任何饰品
				luckyItems: [],
				loading: false,
				totalPages: 1,
				// 当前标签页
				currentTab: 'items',
				// 排序后的物品列表
				sortedItems: [],
				// 按钮按压状态
				itemPress: null,
				// 动画状态
				itemSelectedAnimation: false,

				// 筛选参数
				filterParams: {
					page: 1,
					type_id: 0,
					name: '',
					start: 0,
					end: 0,
					sort: 0
				},

				// 物品类型列表
				itemTypes: [{
						id: 0,
						name: '全部'
					},
					{
						id: 1,
						name: '手套'
					},
					{
						id: 2,
						name: '刀具'
					},
					{
						id: 3,
						name: '手枪'
					},
					{
						id: 4,
						name: '步枪'
					},
					{
						id: 5,
						name: '冲锋枪'
					},
					{
						id: 7,
						name: '重型武器'
					},
					{
						id: 8,
						name: '印花'
					},
					{
						id: 10,
						name: '其他'
					}
				],

				// 掉落记录数据和筛选
				dropRecords: [],
				filterTime: 'all',
				currentValue: 50,
				currentPrice: 500,
				// 贝塞尔曲线指针旋转系统
				isRotating: false, // 是否正在旋转
				currentRotation: 0, // 当前旋转角度 (度数)
				targetRotation: 0, // 目标旋转角度 (度数)
				startRotation: 0, // 起始旋转角度
				totalRotation: 0, // 总旋转角度
				animationProgress: 0, // 动画进度 (0-1)
				animationDuration: 3000, // 动画总时长 (毫秒)
				startTime: 0, // 动画开始时间
				randomRounds: 0, // 随机圈数
				// 自定义进度条属性
				progressColor: '#8A7EDF', // 进度条颜色
				sliderImage: 'https://img.jingkakeji.com/img/static/lucky/silder.png' // 滑块背景图
			};
		},
		computed: {
			filteredDrops() {
				const list = Array.isArray(this.dropRecords) ? this.dropRecords : [];
				if (this.filterTime === 'all') {
					return list;
				} else if (this.filterTime === 'today') {
					return list.filter(drop => drop && drop.period === 'today');
				} else if (this.filterTime === 'week') {
					return list.filter(drop => drop && (drop.period === 'today' || drop.period === 'week'));
				}
				return list;
			},

			// 历史记录
			historyRecords() {
				return this.luckyHistory || [];
			}
		},
		watch: {
			currentValue(newVal, oldVal) {
				if (newVal !== oldVal) {
					// 确保在DOM更新后再绘制
					this.$nextTick(() => {
						this.drawCircle();
					});
				}
			},
			showItemPopup(newVal) {
				this.handlePopupAnimation('item', newVal);
			},
			showHistoryPopup(newVal) {
				this.handlePopupAnimation('history', newVal);
			},
			currentValue(newVal) {
				this.updatePrice();
				this.drawCircle(); // 当滑块值变化时重绘圆形
			},
			selectedItem(newVal) {
				// 当选中物品变化时重绘圆形，确保显示正确的图片
				this.$nextTick(() => {
					this.drawCircle();
				});
			}
		},
		onLoad() {
			// 初始化数据
			this.currentValue = 50;
			// 添加粒子背景效果
			this.createParticles();
		},
		onReady() {
			this.drawCircle(); // 页面准备好后绘制圆形
		},
		onShow() {
			this.onlucky();
			// 加载历史记录数据
			this.loadDropRecords();
		},
		methods: {
			// 切换标签页
			switchTab(tab) {
				// 拦截切换到历史记录，先校验接口
				if (tab === 'history') {
					this.luckyopen(true);
					return;
				}
				this.currentTab = tab;
				if (tab === 'items') {
					this.loadItems();
				}
			},
			async luckyopen(shouldSwitchAfterSuccess = false) {
				let data = {
					id: this.selectedItem.id
				}
				let res = await luckyopen(data)
				console.log(res)

				if (res && res.code == 200) {
					this.dropRecords = Array.isArray(res.data) ? res.data : []
					if (shouldSwitchAfterSuccess) {
						this.currentTab = 'history'
					}
				} else {
					this.dropRecords = []
					if (shouldSwitchAfterSuccess) {
						uni.showToast({
							title: res && res.message ? res.message : '无法进入历史记录',
							icon: 'none',
							duration: 2000
						})
					}
				}
			},
			// 选择物品
			selectItem(item) {
				this.selectedItem = item;
				this.currentValue = 50; // 重置为默认值
				this.updatePrice();
				this.drawCircle();
				// 触发选中动画
				this.itemSelectedAnimation = true;
				setTimeout(() => {
					this.itemSelectedAnimation = false;
				}, 500);
			},

			// 检查是否已选中
			isSelected(itemId) {
				return this.selectedItem.id === itemId;
			},

			// 获取稀有度文本
			getRarityText(dura) {
				const rarityMap = {
					1: '普通',
					2: '高级',
					3: '稀有',
					4: '史诗',
					5: '传说'
				};
				return rarityMap[dura] || '未知';
			},

			// 加载物品列表并排序
			loadItems() {
				// 按价格从小到大排序
				this.sortedItems = [...this.luckyItems].sort((a, b) => {
					const priceA = parseFloat(a.bean || a.box_bean || 0);
					const priceB = parseFloat(b.bean || b.box_bean || 0);
					return priceA - priceB;
				});
			},

			// 格式化时间
			formatTime(timestamp) {
				const date = new Date(timestamp);
				return date.toLocaleString('zh-CN');
			},

			// uniapp兼容的动画帧函数
			requestAnimationFrameCompat(callback) {
				// 在uniapp环境中，使用setTimeout模拟requestAnimationFrame
				// 16.67ms约等于60fps
				return setTimeout(callback, 16);
			},

			// 取消动画帧
			cancelAnimationFrameCompat(id) {
				clearTimeout(id);
			},

			// 贝塞尔曲线缓动函数 - 慢-快-慢效果
			easeInOutCubic(t) {
				// 三次贝塞尔曲线：慢-快-慢
				// 控制点：(0,0), (0.25,0.1), (0.25,0.1), (1,1)
				return t < 0.5 ?
					4 * t * t * t :
					1 - Math.pow(-2 * t + 2, 3) / 2;
			},

			// 更平滑的贝塞尔曲线 - 慢-快-慢
			easeInOutQuart(t) {
				// 四次贝塞尔曲线：更平滑的慢-快-慢
				return t < 0.5 ?
					8 * t * t * t * t :
					1 - Math.pow(-2 * t + 2, 4) / 2;
			},

			// 自定义贝塞尔曲线 - 更明显的慢-快-慢效果
			easeInOutCustom(t) {
				// 使用更明显的慢-快-慢曲线
				// 前半段：慢到快 (0-0.5)
				// 后半段：快到慢 (0.5-1)
				if (t < 0.5) {
					// 前半段：从慢到快
					const x = t * 2; // 0-1
					return 0.5 * (x * x * x * x); // 四次方，慢启动
				} else {
					// 后半段：从快到慢
					const x = (t - 0.5) * 2; // 0-1
					return 0.5 + 0.5 * (1 - Math.pow(1 - x, 4)); // 四次方，慢结束
				}
			},

			// 生成随机圈数 (2-5圈)
			getRandomRounds() {
				return Math.floor(Math.random() * 4) + 2; // 2-5圈
			},

			cnm() {
				uni.navigateTo({
					url: "/pages/lucky/cao/cao"
				})
			},
			// 创建粒子背景效果（uniapp适配）
			createParticles() {
				// 在uniapp中，粒子效果通过CSS动画和模板实现
				// 不需要DOM操作，粒子效果已经在模板中定义
				// 粒子效果已通过CSS动画实现
			},

			// 加载历史记录数据
			loadDropRecords() {
				// 示例数据
				this.dropRecords = [{
						id: 1,
						username: "玩家123",
						time: "10:23",
						itemName: "龙鳞手套",
						itemImg: "https://img.jingkakeji.com/img/static/items/item1.jpg",
						itemValue: 1250,
						period: "today",
						userAvatar: "https://img.jingkakeji.com/img/static/avatars/avatar1.jpg"
					},
					{
						id: 2,
						username: "幸运星",
						time: "昨天",
						itemName: "黄金匕首",
						itemImg: "https://img.jingkakeji.com/img/static/items/item2.jpg",
						itemValue: 3500,
						period: "week",
						userAvatar: "https://img.jingkakeji.com/img/static/avatars/avatar2.jpg"
					},
					{
						id: 3,
						username: "开箱达人",
						time: "3天前",
						itemName: "翡翠步枪",
						itemImg: "https://img.jingkakeji.com/img/static/items/item3.jpg",
						itemValue: 2800,
						period: "week",
						userAvatar: "https://img.jingkakeji.com/img/static/avatars/avatar3.jpg"
					}
				];
			},

			async onlucky() {
				try {
					this.loading = true;
					let res = await getluckyList(
						this.filterParams.page,
						this.filterParams.type_id,
						this.filterParams.name,
						this.filterParams.start,
						this.filterParams.end,
						this.filterParams.sort
					);

					if (res && res.data && res.data.data) {
						this.luckyItems = res.data.data;
						this.totalPages = res.data.last_page || 1;

						// 加载并排序物品
						this.loadItems();

						// 不自动选择任何饰品，保持默认状态
						// 用户需要手动选择饰品
					} else {
						// 接口返回格式不正确
						uni.showToast({
							title: '数据加载失败',
							icon: 'none'
						});
						this.luckyItems = [];
						this.totalPages = 1;
					}
				} catch (error) {
					// 获取饰品列表失败
					uni.showToast({
						title: '网络错误',
						icon: 'none'
					});
					this.luckyItems = [];
					this.totalPages = 1;
				} finally {
					this.loading = false;
				}
			},

			// 弹窗动画处理
			handlePopupAnimation(type, show) {
				if (show) {
					this[`${type}PopupPosition`] = 1000;
					this[`${type}PopupOpacity`] = 0;
					this.$nextTick(() => {
						const animate = () => {
							if (this[`${type}PopupPosition`] > 0) {
								this[`${type}PopupPosition`] = Math.max(0, this[`${type}PopupPosition`] - 50);
								this[`${type}PopupOpacity`] = Math.min(1, 1 - this[`${type}PopupPosition`] /
									1000);
								this.requestAnimationFrameCompat(animate);
							}
						};
						animate();
					});
				}
			},

			// 关闭弹窗
			closeItemPopup() {
				this.closePopup('item');
			},
			closeHistoryPopup() {
				this.closePopup('history');
			},

			// 中奖结果弹窗相关方法
			showResultPopupWithData(winPercent, itemData) {
				// 确保winPercent是有效数字
				if (isNaN(winPercent) || winPercent === null || winPercent === undefined) {
					console.warn('警告: winPercent无效，使用默认值0');
					winPercent = 0;
				}

				// 判断是否中奖：percent值小于等于进度条值
				// 如果percent <= currentValue：恭喜你获得了某物品
				// 如果percent > currentValue：很遗憾，未中奖指定物品，你获得了某物品
				const isWin = winPercent <= this.currentValue;

				console.log(`中奖判断: winPercent=${winPercent}%, currentValue=${this.currentValue}%, isWin=${isWin}`);

				// 设置结果数据
				this.resultData = {
					isWin: isWin,
					item: {
						name: itemData.name || '未知物品',
						cover: itemData.cover || 'https://img.jingkakeji.com/img/static/default-item.png',
						dura_alias: itemData.dura_alias || '普通',
						box_bean: itemData.box_bean || 0
					}
				};

				// 显示弹窗（淡入动画）
				this.showResultPopupWithAnimation();
			},

			// 延迟显示结果弹窗
			showResultWithDelay() {
				// 显示开奖中提示
				this.showResultLoading = true;

				// 延迟2秒显示结果，增加悬念感
				setTimeout(() => {
					// 隐藏开奖中提示
					this.showResultLoading = false;

					// 从接口返回的数据中获取winPercent
					let winPercent = 0;
					if (this.lastOpenResult && this.lastOpenResult.data && this.lastOpenResult.data.percent !==
						undefined) {
						winPercent = this.lastOpenResult.data.percent;
					} else {
						// 如果没有接口数据，使用默认值
						winPercent = 0;
						console.warn('警告: 无法获取winPercent，使用默认值0');
					}
					playSound("https://img.jingkakeji.com/img/static/music/succeed.mp3")
					// 从接口返回的数据中获取物品信息
					if (this.lastOpenResult && this.lastOpenResult.data) {
						const itemData = {
							name: this.lastOpenResult.data.name || '未知物品',
							cover: this.lastOpenResult.data.cover || 'https://img.jingkakeji.com/img/static/default-item.png',
							dura_alias: this.lastOpenResult.data.dura_alias || '普通',
							box_bean: this.lastOpenResult.data.box_bean || 0
						};
						this.showResultPopupWithData(winPercent, itemData);
					} else {
						// 如果没有接口数据，使用当前选中的物品作为备用
						const itemData = {
							name: this.selectedItem.name,
							cover: this.selectedItem.cover,
							dura_alias: this.selectedItem.dura_alias || '普通',
							box_bean: this.selectedItem.bean || 0
						};
						this.showResultPopupWithData(winPercent, itemData);
					}
				}, 2000); // 延迟2秒
			},

			// 显示弹窗并执行淡入动画
			showResultPopupWithAnimation() {
				this.showResultPopup = true;
				this.resultPopupOpacity = 1;
				this.resultPopupPosition = 0;
			},

			closeResultPopup() {
				this.closeResultPopupWithAnimation();
			},

			// 获取结果物品列表（模拟多个物品）
			getResultItems() {
				// 如果只有一个物品，复制4次显示
				const items = [];
				for (let i = 0; i < 4; i++) {
					items.push({
						...this.resultData.item,
						cover: this.resultData.item.cover,
						name: this.resultData.item.name,
						dura_alias: this.resultData.item.dura_alias,
						box_bean: this.resultData.item.box_bean
					});
				}
				return items;
			},

			// 继续开箱
			continueOpening() {
				this.closeResultPopup();
				// 可以在这里添加继续开箱的逻辑
			},

			// 全部分解
			disassembleAll() {
				uni.showToast({
					title: '分解成功',
					icon: 'success'
				});
				this.closeResultPopup();
				// 可以在这里添加分解逻辑
			},

			// 关闭弹窗并执行淡出动画
			closeResultPopupWithAnimation() {
				// uniapp适配：使用Vue的响应式数据控制动画
				this.resultPopupOpacity = 0;
				setTimeout(() => {
					this.showResultPopup = false;
					this.resultPopupOpacity = 1; // 重置透明度，为下次显示做准备
				}, 300);
			},

			// 获取品质样式类
			getQualityClass(quality) {
				const qualityMap = {
					'消费级': 'quality-consumer',
					'工业级': 'quality-industrial',
					'军规级': 'quality-milspec',
					'受限': 'quality-restricted',
					'保密': 'quality-classified',
					'隐秘': 'quality-covert',
					'非凡': 'quality-extraordinary',
					'违禁': 'quality-contraband'
				};
				return qualityMap[quality] || 'quality-common';
			},

			closePopup(type) {
				if (!this[`show${type.charAt(0).toUpperCase() + type.slice(1)}Popup`]) return;

				const animate = () => {
					if (this[`${type}PopupPosition`] < 1000) {
						this[`${type}PopupPosition`] += 50;
						this[`${type}PopupOpacity`] = 1 - this[`${type}PopupPosition`] / 1000;
						this.requestAnimationFrameCompat(animate);
					} else {
						this[`show${type.charAt(0).toUpperCase() + type.slice(1)}Popup`] = false;
					}
				};
				animate();
			},

			// 弹窗拖动功能
			startDrag(type, e) {
				this.isDragging[type] = true;
				this[`${type}PopupStartY`] = e.touches[0].clientY;
				this[`${type}CurrentTranslateY`] = this[`${type}PopupPosition`];
			},

			onDrag(type, e) {
				if (!this.isDragging[type]) return;

				const touchY = e.touches[0].clientY;
				const diff = touchY - this[`${type}PopupStartY`];

				// 限制拖动范围
				this[`${type}PopupPosition`] = Math.min(1000, Math.max(0, this[`${type}CurrentTranslateY`] + diff));
				this[`${type}PopupOpacity`] = 1 - this[`${type}PopupPosition`] / 1000;
			},

			endDrag(type) {
				this.isDragging[type] = false;

				// 如果拖动超过一定距离，关闭弹窗
				if (this[`${type}PopupPosition`] > 500) {
					this[`close${type.charAt(0).toUpperCase() + type.slice(1)}Popup`]();
				} else {
					// 否则弹回原位
					const animate = () => {
						if (this[`${type}PopupPosition`] > 0) {
							this[`${type}PopupPosition`] = Math.max(0, this[`${type}PopupPosition`] - 30);
							this[`${type}PopupOpacity`] = 1 - this[`${type}PopupPosition`] / 1000;
							this.requestAnimationFrameCompat(animate);
						}
					};
					animate();
				}
			},

			getRarityText(dura) {
				const rarityMap = {
					5: "普通",
					4: "稀有",
					3: "史诗",
					2: "传说",
					1: "神话"
				};
				return rarityMap[dura] || "普通";
			},

			selectItem(item) {
				this.selectedItem = item;
				this.currentValue = 50; // 重置进度值
				this.updatePrice();
				this.drawCircle();

				// uniapp适配：通过Vue响应式数据控制动画
				this.itemSelectedAnimation = true;
				setTimeout(() => {
					this.itemSelectedAnimation = false;
				}, 500);

				uni.showToast({
					title: `已选择 ${item.name}`,
					icon: 'none',
					duration: 1000
				});
			},

			isSelected(itemId) {
				return this.selectedItem && this.selectedItem.id === itemId;
			},

			// 自定义滑块事件处理
			onThumbTouchStart() {
				this.isDragging.slider = true;
			},

			onThumbTouchMove(e) {
				if (this.isDragging.slider) {
					this.updateProgressFromTouch(e);
				}
			},

			onThumbTouchEnd() {
				this.isDragging.slider = false;
			},

			// 根据触摸位置更新进度
			updateProgressFromTouch(e) {
				// 获取滑块容器的位置和宽度
				const sliderRect = uni.createSelectorQuery().in(this).select('.custom-slider-track').boundingClientRect();
				sliderRect.exec(rects => {
					if (rects && rects[0]) {
						const rect = rects[0];
						const sliderWidth = rect.width;
						const sliderLeft = rect.left;

						// 获取触摸位置
						let touchX = e.touches[0].clientX;

						// 限制在滑块范围内
						if (touchX < sliderLeft) {
							touchX = sliderLeft;
						} else if (touchX > sliderLeft + sliderWidth) {
							touchX = sliderLeft + sliderWidth;
						}

						// 计算进度百分比
						let progress = ((touchX - sliderLeft) / sliderWidth) * 100;
						// 限制在1-75的范围内
						progress = Math.max(1, Math.min(75, progress));
						// 四舍五入到整数
						progress = Math.round(progress);

						// 更新进度
						if (progress !== this.currentValue) {
							this.currentValue = progress;
						}
					}
				});
			},
			// 更新价格
			updatePrice() {
				if (!this.selectedItem || !this.selectedItem.bean) return;

				const itemPrice = this.selectedItem.bean;
				this.currentPrice = Math.round(itemPrice * (this.currentValue / 100));
			},
			// 新增颜色转换工具函数：将十六进制颜色转为rgba格式
			hexToRgba(hex, alpha) {
				// 移除#号
				hex = hex.replace('#', '');

				// 解析RGB值
				const r = parseInt(hex.substring(0, 2), 16);
				const g = parseInt(hex.substring(2, 4), 16);
				const b = parseInt(hex.substring(4, 6), 16);

				// 返回rgba格式
				return `rgba(${r}, ${g}, ${b}, ${alpha})`;
			},
			// 贝塞尔曲线指针旋转方法
			startPointerRotation(percent) {
				// 如果正在旋转，先停止
				if (this.isRotating) {
					this.isRotating = false;
				}

				// 计算最终目标角度
				// 百分比转换为角度：0% = 0度，100% = 360度
				// 注意：进度条从12点钟方向开始，指针也应该从12点钟方向开始
				const targetAngle = (percent / 100) * 360;

				// 生成随机圈数 (2-5圈)
				this.randomRounds = this.getRandomRounds();

				// 计算总旋转角度：随机圈数 + 目标角度
				// 最终指针应该停在目标角度位置（对应winPercent在圆盘上的位置）
				this.totalRotation = (this.randomRounds * 360) + targetAngle;

				// 调试信息：显示角度对应关系
				console.log(
					`角度计算: winPercent=${percent}%, targetAngle=${targetAngle}°, currentValue=${this.currentValue}%, currentValueAngle=${(this.currentValue/100)*360}°`
				);
				console.log(
					`中奖判断: winPercent(${percent}%) <= currentValue(${this.currentValue}%) = ${percent <= this.currentValue}`
				);

				// 根据圈数动态调整动画时长 (2-4秒)
				// 更多圈数 = 更长时间，但不超过4秒
				this.animationDuration = Math.min(2000 + (this.randomRounds * 500), 4000);

				// 重置旋转状态
				// 每次开箱时，指针都从12点钟方向（0度）开始转动
				this.startRotation = 0; // 重置到起始位置
				this.currentRotation = 0; // 重置当前角度
				this.targetRotation = this.startRotation + this.totalRotation;
				this.animationProgress = 0;
				this.startTime = Date.now();
				this.isRotating = true;

				// 开始贝塞尔曲线动画
				console.log(
					`开始指针旋转: ${this.randomRounds}圈, 目标角度: ${targetAngle}°, 总角度: ${this.totalRotation}°, 动画时长: ${this.animationDuration}ms`
				);
				this.animatePointerWithBezier();
			},

			// 贝塞尔曲线指针动画帧
			animatePointerWithBezier() {
				if (!this.isRotating) return;

				// 计算动画进度 (0-1)
				const elapsed = Date.now() - this.startTime;
				this.animationProgress = Math.min(elapsed / this.animationDuration, 1);

				// 使用自定义贝塞尔曲线计算当前角度（更明显的慢-快-慢效果）
				const easedProgress = this.easeInOutCustom(this.animationProgress);
				this.currentRotation = this.startRotation + (this.totalRotation * easedProgress);

				// 重绘指针
				this.drawCircle();

				// 检查动画是否完成
				if (this.animationProgress >= 1) {
					// 动画完成，精确停在目标位置
					this.currentRotation = this.targetRotation;
					this.isRotating = false;
					this.drawCircle();

					// 调试信息：显示最终停止位置
					const finalAngle = this.currentRotation % 360; // 获取最终角度（0-360度）
					console.log(`指针停止: 最终角度=${finalAngle}°, 对应百分比=${(finalAngle/360)*100}%`);

					// 延迟显示结果弹窗，增加悬念感
					this.showResultWithDelay();
					return;
				}

				// 继续下一帧
				this.requestAnimationFrameCompat(this.animatePointerWithBezier.bind(this));
			},

			// 绘制圆形进度条和指针（修复虚线显示问题）
			drawCircle() {
				const currentValue = this.currentValue;
				const ctx = uni.createCanvasContext('luckyCircle', this);
				ctx.clearRect(0, 0, this.circleSize, this.circleSize);

				const centerX = this.circleSize / 2;
				const centerY = this.circleSize / 2;

				// 绘制背景图
				if (this.circleBgImage) {
					ctx.drawImage(
						this.circleBgImage,
						0, 0, this.circleSize, this.circleSize,
						0, 0, this.circleSize, this.circleSize
					);
				}

				// 绘制底部圆环
				ctx.save();
				ctx.beginPath();
				ctx.setLineWidth(this.circleLineWidth);
				ctx.setStrokeStyle('rgba(255, 255, 255, 0.2)');
				ctx.setLineDash([this.circleDashLength, this.circleDashGap], 0);
				ctx.arc(centerX, centerY, this.circleRadius, 0, 2 * Math.PI);
				ctx.stroke();
				ctx.restore();

				// 计算进度条角度（与指针旋转保持一致）
				const startAngle = -Math.PI / 2; // 从顶部开始（12点钟方向）
				const totalAngle = 2 * Math.PI; // 完整圆形
				const endAngle = startAngle + (totalAngle * currentValue) / 100;

				// 绘制进度圆环
				ctx.save();
				ctx.beginPath();
				ctx.setLineWidth(this.circleLineWidth);
				ctx.setStrokeStyle(this.progressColor);
				ctx.setLineDash([this.circleDashLength, this.circleDashGap], 0);
				ctx.arc(centerX, centerY, this.circleRadius, startAngle, endAngle);
				ctx.stroke();
				ctx.restore();

				// 绘制发光效果
				ctx.save();
				ctx.beginPath();
				ctx.setLineWidth(this.circleLineWidth / 2);
				ctx.setStrokeStyle(this.hexToRgba(this.progressColor, 0.25));
				ctx.setLineDash([this.circleDashLength, this.circleDashGap], 0);
				ctx.arc(centerX, centerY, this.circleRadius + 5, startAngle, endAngle);
				ctx.stroke();
				ctx.restore();

				// 进度条终点高亮
				ctx.save();
				const highlightRadius = this.circleLineWidth * 1.5;
				const highlightX = centerX + Math.cos(endAngle) * this.circleRadius;
				const highlightY = centerY + Math.sin(endAngle) * this.circleRadius;

				ctx.beginPath();
				ctx.arc(highlightX, highlightY, highlightRadius * 2, 0, 2 * Math.PI);
				ctx.setFillStyle(this.hexToRgba(this.progressColor, 0.2));
				ctx.fill();

				ctx.beginPath();
				ctx.arc(highlightX, highlightY, highlightRadius * 1.5, 0, 2 * Math.PI);
				ctx.setFillStyle(this.hexToRgba(this.progressColor, 0.4));
				ctx.fill();

				ctx.beginPath();
				ctx.arc(highlightX, highlightY, highlightRadius, 0, 2 * Math.PI);
				ctx.setFillStyle(this.progressColor);
				ctx.fill();
				ctx.restore();

				// 指针绘制
				ctx.save();
				ctx.translate(centerX, centerY);

				// 应用旋转角度（转换为弧度）
				ctx.rotate((this.currentRotation * Math.PI) / 180);

				// 指针绘制参数
				const innerOffset = 70;
				const outerLength = this.circleRadius - 5;

				// 绘制大三角形
				ctx.beginPath();
				ctx.setFillStyle(this.pointerColor);
				ctx.moveTo(0, -innerOffset);
				ctx.lineTo(-this.pointerMainSize, -outerLength + this.pointerSubSize);
				ctx.lineTo(this.pointerMainSize, -outerLength + this.pointerSubSize);
				ctx.closePath();
				ctx.fill();

				// 绘制小三角形
				ctx.beginPath();
				ctx.setFillStyle(this.pointerColor);
				ctx.moveTo(0, -outerLength);
				ctx.lineTo(-this.pointerSubSize, -outerLength + this.pointerSubSize * 2);
				ctx.lineTo(this.pointerSubSize, -outerLength + this.pointerSubSize * 2);
				ctx.closePath();
				ctx.fill();

				// 绘制中心轴
				ctx.beginPath();
				ctx.setStrokeStyle(this.hexToRgba(this.pointerColor, 0.8));
				ctx.setLineWidth(2);
				ctx.moveTo(0, -innerOffset);
				ctx.lineTo(0, -outerLength);
				ctx.stroke();

				ctx.restore();

				ctx.draw(false);
			},



			refreshData() {
				this.filterParams.page = 1;
				this.onlucky();
				uni.showToast({
					title: '刷新成功',
					icon: 'success',
					duration: 1000
				});
			},

			async openCase() {
				if (!this.selectedItem.id) {
					uni.showToast({
						title: '请先选择物品',
						icon: 'none',
						duration: 2000
					});
					return;
				}

				let data = {
					id: this.selectedItem.id,
					percent: this.currentValue / 100
				};

				try {
					let res = await getluckyOpen(data);
					if (res.code === 200) {
						//播放音乐
						console.log('播放音乐');
						playSound("https://img.jingkakeji.com/img/static/music/bgm_zhuanbei.mp3")
						// 保存接口返回的结果，用于弹窗显示
						this.lastOpenResult = res;

						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						});
						// 开箱成功
						// 打开箱子后的逻辑
						this.loadDropRecords();

						this.startPointerRotation(res.data.percent)
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						});
					}
				} catch (error) {
					// 开箱失败
					uni.showToast({
						title: '操作失败',
						icon: 'none',
						duration: 2000
					});
				}
			},

			navigateBack() {
				uni.navigateBack({
					delta: 1
				});
			},

			handleTypeChange(typeId) {
				this.filterParams.type_id = typeId;
				this.filterParams.page = 1;
				this.onlucky();
			},

			handleSortChange(sortType) {
				this.filterParams.sort = sortType;
				this.filterParams.page = 1;
				this.onlucky();
			},

			handlePriceInput() {
				this.filterParams.start = Number(this.filterParams.start) || 0;
				this.filterParams.end = Number(this.filterParams.end) || 0;
			},

			applyPriceFilter() {
				this.handlePriceInput();
				this.filterParams.page = 1;
				this.onlucky();
			},

			handleSearchInput() {
				// 搜索输入处理
			},

			applySearch() {
				this.filterParams.page = 1;
				this.onlucky();
			},

			changePage(page) {
				if (page < 1 || page > this.totalPages) return;
				this.filterParams.page = page;
				this.onlucky();
			}
		}
	};
</script>

<style scoped lang="scss">
	.container {
		min-height: 100vh;
		background-color: #1a1a2e;
		background-image: url("https://img.jingkakeji.com/img/static/lucky/backs.png");
		background-size: cover;
		background-position: center;
		background-attachment: fixed;
		color: #fff;
		overflow-x: hidden;
	}

	/* 粒子背景效果 */
	.particle-background {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		overflow: hidden;
		z-index: 0;
	}

	.particle {
		position: absolute;
		border-radius: 50%;
		opacity: 0.6;
		animation: float linear infinite;
	}

	@keyframes float {
		0% {
			transform: translateY(100vh) translateX(0);
		}

		100% {
			transform: translateY(-10vh) translateX(calc(100vw * var(--random-x, 0.5)));
		}
	}

	.navbar {
		height: 44px;
		line-height: 44px;
		text-align: center;
	}

	.content {
		padding-bottom: 160rpx;
	}

	.item-selection {
		margin-top: 80rpx;
		margin-bottom: 20px;
		padding: 15px;
		position: relative;
		/* 确保容器稳定，防止子元素动画影响布局 */
		overflow: visible;
		transform: translateZ(0);
	}

	.selection-title {
		font-size: 16px;
		margin-bottom: 15px;
		height: 80rpx;
		text-align: center;
		text-shadow: 0 0 10px rgba(120, 105, 218, 0.7);
	}

	.selected-item-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 25px;
		position: relative;
		height: 250px;
		transition: transform 0.3s ease;
		justify-content: center;
		/* 防止动画时位置跳动 */
		transform: translateZ(0);
		will-change: transform;
		/* 固定容器位置，防止缩放影响布局 */
		transform-origin: center center;
	}

	/* 圆形Canvas样式 - 包含中间图片和数值 */
	.circle-container {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		/* 防止动画时位置跳动 */
		transform: translateZ(0);
		will-change: transform;
	}

	.lucky-circle {
		position: relative;
		z-index: 1;
		background: url("https://img.jingkakeji.com/img/static/lucky/luckys.png");
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		background-position: -24px 5px;
	}

	/* 圆圈中间的饰品图片 */
	.circle-item-image {
		position: absolute;
		width: 120px;
		height: 120px;
		border-radius: 50%;
		overflow: hidden;
		z-index: 2;
		display: flex;
		align-items: center;
		/* 垂直居中 */
		justify-content: center;
		/* 可选：水平居中 */
		border: 2px solid rgba(138, 126, 223, 0.6);
		box-shadow: 0 0 20px rgba(138, 126, 223, 0.5);
	}

	.circle-img {
		width: 90%;
		height: 90%;
		object-fit: cover;
	}

	/* 当前值显示在图片上方（优先级高） */
	.circle-center-value {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: #fff;
		font-size: 16px;
		font-weight: bold;
		text-shadow: 0 0 10px rgba(138, 126, 223, 0.8);
		z-index: 3;
		background-color: rgba(0, 0, 0, 0.3);
		padding: 8px 15px;
		border-radius: 60px;
		min-width: 60px;
		text-align: center;
		box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
	}


	/* 物品选择动画 */
	.item-selected-animation {
		animation: bounce 0.5s ease;
	}

	/* 开奖中提示样式 */
	.result-loading {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
		background: rgba(0, 0, 0, 0.7);
		animation: fadeIn 0.3s ease-in;
	}

	.loading-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 40rpx;
		background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
		border-radius: 20rpx;
		border: 2rpx solid rgba(255, 255, 255, 0.1);
		box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.5);
	}

	.loading-spinner {
		width: 60rpx;
		height: 60rpx;
		border: 4rpx solid rgba(255, 255, 255, 0.2);
		border-top: 4rpx solid #7869DA;
		border-radius: 50%;
		animation: spin 1s linear infinite;
		margin-bottom: 20rpx;
	}

	.loading-text {
		font-size: 28rpx;
		color: #fff;
		font-weight: bold;
		text-shadow: 0 0 10rpx rgba(255, 255, 255, 0.3);
	}

	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	/* 中奖结果弹窗样式 */
	.result-popup {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1001;
		padding: 40rpx;
		box-sizing: border-box;
		transition: opacity 0.3s ease-in-out;
	}

	.result-popup-content {
		background: linear-gradient(135deg, #4a2c7a 0%, #6b46a3 50%, #8b5cf6 100%);
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.5);
		border: 3rpx solid #a855f7;
		width: 100%;
		max-width: 700rpx;
		max-height: 80vh;
		overflow: hidden;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
	}

	/* 弹窗标题栏 */
	.result-header {
		background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 20rpx 20rpx 0 0;
		position: relative;
	}

	.result-header-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #fff;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
	}

	.result-close-btn {
		width: 140rpx;
		height: 40rpx;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}

	.result-close-text {
		font-size: 24rpx;
		color: #fff;
		font-weight: bold;
	}

	/* 金色渐变（中奖） */
	.gold-gradient {
		background-image: linear-gradient(90deg, #F8E3A1, #F2C14E, #D4AF37);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		text-shadow: 0 0 12rpx rgba(244, 205, 96, 0.35);
	}

	/* 灰色渐变（未中奖） */
	.gray-gradient {
		background-image: linear-gradient(90deg, #cfd3d8, #aeb4bb, #8b9096);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		text-shadow: 0 0 12rpx rgba(180, 185, 190, 0.25);
	}

	/* 物品网格展示 */
	.result-items-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
		padding: 30rpx;
		background: rgba(0, 0, 0, 0.1);
	}

	.result-item-card {
		background: linear-gradient(135deg, #6b46a3 0%, #8b5cf6 100%);
		border-radius: 12rpx;
		padding: 15rpx;
		border: 2rpx solid #a855f7;
		position: relative;
		overflow: hidden;
	}

	.item-card-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.item-card-image {
		width: 120rpx;
		height: 80rpx;
		margin-bottom: 10rpx;
		border-radius: 8rpx;
	}

	.item-card-info {
		width: 100%;
	}

	.item-condition {
		display: block;
		font-size: 20rpx;
		color: #e5e7eb;
		margin-bottom: 5rpx;
	}

	.item-name {
		display: block;
		font-size: 22rpx;
		color: #fff;
		font-weight: bold;
		margin-bottom: 8rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.item-value {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 5rpx;
	}

	.item-price {
		font-size: 20rpx;
		color: #fbbf24;
		font-weight: bold;
	}

	.coin-icon {
		font-size: 16rpx;
		margin-left: 4rpx;
	}

	/* 底部按钮区域 */
	.result-actions {
		display: flex;
		gap: 20rpx;
		padding: 30rpx;
		background: rgba(0, 0, 0, 0.1);
		border-radius: 0 0 20rpx 20rpx;
	}

	.action-btn {
		flex: 1;
		height: 80rpx;
		border-radius: 12rpx;
		border: none;
		font-size: 28rpx;
		font-weight: bold;
		color: #fff;
		text-align: center;
		line-height: 80rpx;
		transition: all 0.3s ease;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
	}

	.continue-btn {
		background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
	}

	.continue-btn:active {
		transform: translateY(2rpx);
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.2);
	}

	.disassemble-btn {
		background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
	}

	.disassemble-btn:active {
		transform: translateY(2rpx);
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.2);
	}

	.result-item-image-wrapper {
		position: relative;
		margin-right: 20rpx;
	}

	.result-item-image {
		width: 150rpx;
		height: 150rpx;
		border-radius: 10rpx;
		border: 2rpx solid rgba(255, 255, 255, 0.2);
	}

	.result-item-quality {
		position: absolute;
		top: -5rpx;
		left: -5rpx;
		padding: 4rpx 8rpx;
		border-radius: 8rpx;
		font-size: 20rpx;
		font-weight: bold;
		color: #fff;
		text-shadow: 0 0 5rpx rgba(0, 0, 0, 0.8);
	}

	/* 品质颜色 */
	.quality-consumer {
		background: #b0b3b8;
	}

	.quality-industrial {
		background: #5e98d9;
	}

	.quality-milspec {
		background: #4b69ff;
	}

	.quality-restricted {
		background: #8847ff;
	}

	.quality-classified {
		background: #d32ce6;
	}

	.quality-covert {
		background: #eb4b4b;
	}

	.quality-extraordinary {
		background: #e4ae39;
	}

	.quality-contraband {
		background: #e4ae39;
	}

	.quality-common {
		background: #b0b3b8;
	}

	.result-item-info {
		flex: 1;
	}

	.result-item-name {
		display: block;
		font-size: 28rpx;
		font-weight: bold;
		color: #fff;
		margin-bottom: 10rpx;
	}

	.result-item-value {
		display: flex;
		align-items: center;
	}

	.result-item-bean {
		font-size: 24rpx;
		font-weight: bold;
		color: #ffd700;
		margin-right: 5rpx;
	}

	.result-item-bean-unit {
		font-size: 20rpx;
		color: #ccc;
	}

	.result-description {
		text-align: center;
		margin-bottom: 30rpx;
		padding: 20rpx;
		background: rgba(255, 255, 255, 0.05);
		border-radius: 10rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.1);
	}

	.result-desc-text {
		font-size: 26rpx;
		color: #fff;
		line-height: 1.5;
	}

	.result-close-btn {
		text-align: center;
		padding: 20rpx;
		background: linear-gradient(135deg, #7869DA 0%, #4ECDC4 100%);
		border-radius: 15rpx;
		box-shadow: 0 5rpx 15rpx rgba(120, 105, 218, 0.3);
	}

	.result-close-text {
		font-size: 28rpx;
		font-weight: bold;
		color: #fff;
	}

	/* 弹窗动画效果 */
	.result-popup-content {
		animation: popupShow 0.4s ease-out;
	}

	@keyframes popupShow {
		0% {
			opacity: 0;
			transform: scale(0.8) translateY(-50rpx);
		}

		50% {
			opacity: 0.8;
			transform: scale(0.9) translateY(-20rpx);
		}

		100% {
			opacity: 1;
			transform: scale(1) translateY(0);
		}
	}

	/* 弹窗关闭动画 */
	.result-popup-content.closing {
		animation: popupHide 0.3s ease-in forwards;
	}

	@keyframes popupHide {
		0% {
			opacity: 1;
			transform: scale(1) translateY(0);
		}

		100% {
			opacity: 0;
			transform: scale(0.8) translateY(50rpx);
		}
	}

	/* 响应式适配 */
	@media screen and (max-width: 750rpx) {
		.result-popup {
			padding: 20rpx;
		}

		.result-popup-content {
			padding: 30rpx;
			max-width: 100%;
		}

		.result-title-text {
			font-size: 32rpx;
		}

		.result-item-image {
			width: 200rpx;
			height: 200rpx;
		}

		.result-item-name {
			font-size: 26rpx;
		}

		.result-desc-text {
			font-size: 24rpx;
		}
	}

	@media screen and (max-width: 600rpx) {
		.result-popup {
			padding: 15rpx;
		}

		.result-popup-content {
			padding: 25rpx;
		}

		.result-title-text {
			font-size: 30rpx;
		}

		.result-item-container {
			flex-direction: column;
			text-align: center;
		}

		.result-item-image-wrapper {
			margin-right: 0;
			margin-bottom: 15rpx;
		}

		.result-item-image {
			width: 80rpx;
			height: 80rpx;
		}
	}

	@keyframes bounce {

		0%,
		100% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.1);
		}
	}



	.progress-section {
		border-radius: 8px;
		// padding: 15px;
		margin-top: 10px;
	}

	.progress-container {
		position: relative;
		padding: 0 10px;
		margin-top: 20px;
	}

	.slider-wrapper {
		position: relative;
		width: 100%;
		padding: 25px 0;
	}

	/* 自定义滑块样式 */
	.custom-slider-container {
		position: relative;
		width: 100%;
	}

	.custom-slider-track {
		height: 10px;
		/* 更厚的进度条 */
		background-color: rgba(255, 255, 255, 0.1);
		border-radius: 12px;
		position: relative;
		border: 1px solid rgba(120, 105, 218, 0.3);
	}

	.custom-slider-progress {
		height: 100%;
		border-radius: 12px;
		transition: width 0.1s ease-out;
		box-shadow: 0 0 10px rgba(138, 126, 223, 0.6);
	}

	.slider-value-center {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		color: #fff;
		font-size: 14px;
		font-weight: bold;
		z-index: 5;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	}

	.custom-slider-thumb {
		position: absolute;
		width: 100px;
		height: 30px;
		top: 50%;
		transform: translate(-50%, -50%);
		background-repeat: no-repeat;
		background-position: center;
		cursor: pointer;
		z-index: 10;
		transition: transform 0.15s cubic-bezier(0.35, 1.3, 0.3, 1);
	}

	.custom-slider-thumb:active {
		transform: translate(-50%, -50%) scale(1.2);
	}

	/* 按钮组样式 */
	.button-group {
		width: 100%;
		height: 600rpx;
		background: url("https://img.jingkakeji.com/img/static/lucky/luckybgm.png");
		/* 确保图片不平铺 */
		background-repeat: no-repeat;
		/* 让图片居中显示 */
		background-position: center;

		/* 关键属性：让图片覆盖整个容器，保持比例，可能裁剪部分图片 */
		background-size: cover;
		position: relative;
		display: flex;
		flex-direction: column;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.tab-buttons {
		display: flex;
		justify-content: center;
		margin-bottom: 20rpx;
		gap: 20rpx;

	}

	.tab-button {
		padding: 10rpx 30rpx;
		background: rgba(255, 255, 255, 0.1);
		// border-radius: 20rpx;
		color: #fff;
		font-size: 28rpx;
		transition: all 0.3s ease;
		text-align: center;
		line-height: 64rpx;
		width: 284.6rpx;
		height: 64rpx;
		background: url("https://img.jingkakeji.com/img/static/lucky/weiluckys.png");
		/* 确保图片不平铺 */
		background-repeat: no-repeat;

		/* 让图片居中显示 */
		background-position: center;

		/* 关键属性：让图片覆盖整个容器，保持比例，可能裁剪部分图片 */
		background-size: cover;
	}

	.tab-button.active {
		background: #7869DA;
		box-shadow: 0 4rpx 12rpx rgba(120, 105, 218, 0.3);
		background: url("https://img.jingkakeji.com/img/static/lucky/zu.png");
		/* 确保图片不平铺 */
		background-repeat: no-repeat;

		/* 让图片居中显示 */
		background-position: center;

		/* 关键属性：让图片覆盖整个容器，保持比例，可能裁剪部分图片 */
		background-size: cover;
	}

	.content-area {
		flex: 1;
		overflow-y: auto;

	}

	/* 使用 xqsing.vue 的 prize-list 样式 */
	.items-grid-three {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 10rpx;
		margin-top: 26rpx;
		padding: 10rpx;
		// background: #C1BEF9;
		border-radius: 8rpx;
		margin: 10rpx;
	}

	/* 饰品卡片包装器 */
	.item-card-three {
		display: flex;
		flex-direction: column;
		gap: 0;
		background: url("https://img.jingkakeji.com/img/static/lucky/zulucky.png");
		/* 确保图片不平铺 */
		background-repeat: no-repeat;

		/* 让图片居中显示 */
		background-position: center;

		/* 关键属性：让图片覆盖整个容器，保持比例，可能裁剪部分图片 */
		background-size: cover;
	}

	/* 饰品卡片主体 */
	.item-card-three .prize-item {
		border-radius: 12rpx;
		padding: 10rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		gap: 6rpx;
		width: 100%;
		height: 160rpx;
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
		position: relative;
		transition: all 0.3s ease;
		border: 2rpx solid transparent;

	}

	/* 选中状态 - 应用到整个卡片包装器 */
	.item-card-three.selected .prize-item {
		border-color: #ffd700;
		transform: scale(1.05);
		box-shadow: 0 6rpx 20rpx rgba(255, 215, 0, 0.4);
	}

	.item-card-three.selected .prize-price-box {
		border: 2rpx solid #ffd700;
		box-shadow: 0 6rpx 20rpx rgba(255, 215, 0, 0.4);
		transform: scale(1.05);
	}

	.item-card-three .prize-item.pressed {
		transform: scale(0.95);
	}

	/* 图片包装器 */
	.item-card-three .prize-image-wrapper {
		position: relative;
		width: 100%;
		height: 130rpx;
	}

	/* 饰品图片 */
	.item-card-three .prize-image {
		width: 120rpx;
		height: 120rpx;
		object-fit: contain;
		margin: 0 auto;
		margin-top: 5rpx;
		margin-left: 15rpx;
	}

	/* 标签容器 */
	.item-card-three .prize-label {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background: transparent;
		padding: 5rpx;
		text-align: center;
	}

	/* 品质标签 */
	.item-card-three .label-quality {
		display: block;
		font-size: 18rpx;
		color: #e5e7eb;
		margin-bottom: 3rpx;
		text-align: left;
		padding-left: 5rpx;
	}

	/* 名称标签 */
	.item-card-three .label-name {
		display: block;
		font-size: 18rpx;
		color: #fff;
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: center;
	}

	/* 价格盒子 */
	.item-card-three .prize-price-box {
		background-color: #7463DB;
		border-radius: 0;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		box-sizing: border-box;
		/* 右下角切掉一块 */
		clip-path: polygon(0 0, 100% 0, 100% 40%, 86% 100%, 0 100%);
		transition: all 0.3s ease;
		border: 2rpx solid transparent;
	}

	/* 选中状态下的价格盒子 */
	.item-card-three.selected .prize-price-box {
		background: linear-gradient(to bottom, #EAAA58, #DC7636);
	}

	/* 价格文字 */
	.item-card-three .prize-price-text {
		color: #FBDC3B;
		font-size: 18rpx;
		font-weight: bold;
	}

	/* 稀有度标签 */
	.item-card-three .item-rare {
		position: absolute;
		top: 3rpx;
		right: 3rpx;
		background: rgba(0, 0, 0, 0.7);
		color: #fff;
		padding: 1rpx 3rpx;
		border-radius: 3rpx;
		font-size: 14rpx;
		z-index: 2;
		line-height: 1;
	}

	/* 选中标记 */
	.item-card-three .item-selected-mark {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 32rpx;
		color: #ffd700;
		z-index: 3;
		animation: pulse 1s infinite;
	}

	@keyframes pulse {

		0%,
		100% {
			transform: translate(-50%, -50%) scale(1);
		}

		50% {
			transform: translate(-50%, -50%) scale(1.2);
		}
	}

	.cncs {
		width: 100%;
		height: 100rpx;
		display: flex;
		gap: 10px;
		margin-top: 60rpx;
	}

	.curd_boxs {
		width: 100%;
		height: 110rpx;
		margin-top: 90rpx;
		display: flex;
		gap: 20rpx;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 0 20rpx;
	}

	.open-popup-btn,
	.history-btn {
		flex: 1;
		padding: 12px 0;
		border: none;
		height: 50rpx;
		font-size: 16px;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		transition: all 0.2s ease;
		transform: translateY(0);
		background: url("https://img.jingkakeji.com/img/static/lucky/zu.png");
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		border-radius: 8px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	}

	.open-popup-btns {
		// flex: 1;
		width: 230rpx;
		height: 230rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 23px;
		align-items: center;
		/* 垂直居中 */
		justify-content: center;
		/* 可选：水平居中 */
		background-repeat: no-repeat;
		background-position: center;
		background-size: 80% 80%;
		/* 缩小背景图 */
		border-radius: 12px;
		transition: all 0.2s ease;
	}

	.btn-image {
		width: 60%;
		height: 60%;
		border-radius: 10px;
		object-fit: cover;
	}

	.open-popup-btn {
		color: #1a1a2e;
	}

	.history-btn {
		color: #ffffff;
	}

	.open-popup-btn.pressed,
	.history-btn.pressed,
	.open-popup-btns:active {
		transform: translateY(2px);
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	}

	/* 弹窗样式 */
	.popup-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.7);
		z-index: 999;
		transition: opacity 0.3s ease;
	}

	.popup {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #C1BEF9;
		border-top-left-radius: 16px;
		border-top-right-radius: 16px;
		z-index: 1000;
		max-height: 80vh;
		display: flex;
		flex-direction: column;
		transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
		box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
	}

	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px;
		background: url("https://img.jingkakeji.com/img/static/lucky/propheader.png");
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		border-top-left-radius: 16px;
		border-top-right-radius: 16px;
	}

	.popup-title {
		font-size: 18px;
		font-weight: bold;
	}

	.popup-close {
		width: 30px;
		height: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 20px;
		border-radius: 50%;
		transition: all 0.2s ease;
	}

	.popup-close.pressed {
		background-color: rgba(255, 255, 255, 0.1);
		transform: scale(0.9);
	}

	.popup-content {
		flex: 1;
		overflow-y: auto;
		padding: 15px;
		background: #C1BEF9;
		box-sizing: border-box;

		&::-webkit-scrollbar {
			width: 6px;
		}

		&::-webkit-scrollbar-track {
			background: rgba(255, 255, 255, 0.05);
			border-radius: 3px;
		}

		&::-webkit-scrollbar-thumb {
			background: rgba(255, 255, 255, 0.2);
			border-radius: 3px;
		}
	}

	/* 筛选区域样式 */
	.filter-container {
		background-color: #C1BEF9;
		border-radius: 8px;
		padding: 15px;
		margin-bottom: 20px;
		animation: fadeIn 0.4s ease;
		box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(10px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.type-filter {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		margin-bottom: 15px;
	}

	.type-item {
		padding: 5px 12px;
		background-color: rgba(255, 255, 255, 0.1);
		border-radius: 20px;
		font-size: 14px;
		cursor: pointer;
		transition: all 0.2s ease;
	}

	.type-item.active {
		background-color: #7869DA;
		color: #1a1a2e;
		box-shadow: 0 2px 5px rgba(120, 105, 218, 0.4);
	}

	/* 饰品展示网格 - 改为四列布局，解决图片过大问题 */
	.items-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 12px;
		padding-bottom: 20px;
	}

	.item-card {
		background-color: rgba(255, 255, 255, 0.1);
		border-radius: 10px;
		overflow: hidden;
		transition: all 0.3s ease;
		animation: cardEnter 0.5s ease-out forwards;
		opacity: 0;
		transform: translateY(10px);
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	@keyframes cardEnter {
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.item-card.selected {
		border: 2px solid #7869DA;
		box-shadow: 0 0 15px #7869DA;
	}

	.item-card.pressed {
		transform: scale(0.95);
	}

	.item-rare {
		padding: 3px 0;
		text-align: center;
		font-size: 12px;
		font-weight: bold;
	}

	.rare-5 {
		background-color: #9e9e9e;
		color: #fff;
	}

	.rare-4 {
		background-color: #4caf50;
		color: #fff;
	}

	.rare-3 {
		background-color: #2196f3;
		color: #fff;
	}

	.rare-2 {
		background-color: #9c27b0;
		color: #fff;
	}

	.rare-1 {
		background-color: #ff9800;
		color: #fff;
	}

	/* 优化物品图片容器，确保图片尺寸合适 */
	.item-img-container {
		position: relative;
		padding-top: 100%;
		/* 1:1 比例 */
		flex-grow: 1;
	}

	.item-img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.item-chance {
		position: absolute;
		bottom: 5px;
		right: 5px;
		background-color: rgba(0, 0, 0, 0.6);
		padding: 2px 5px;
		border-radius: 4px;
		font-size: 12px;
	}

	.item-selected-mark {
		position: absolute;
		top: 5px;
		right: 5px;
		background-color: #7869DA;
		width: 24px;
		height: 24px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
	}

	/* 物品信息区域 - 确保信息完整显示 */
	.item-info {
		padding: 8px;
		background-color: rgba(0, 0, 0, 0.1);
	}

	.item-name {
		font-size: 13px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-bottom: 3px;
		line-height: 1.2;
	}

	.item-price {
		font-size: 12px;
		color: #FBDC3B;
		font-weight: bold;
	}

	/* 空状态和加载状态 */
	.empty-state,
	.loading-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 40px 0;
		color: #666;
	}

	.empty-state i,
	.loading-state i {
		font-size: 40px;
		margin-bottom: 15px;
		color: #999;
	}

	/* 加载动画 */
	.loader {
		width: 40px;
		height: 40px;
		border: 3px solid rgba(120, 105, 218, 0.3);
		border-radius: 50%;
		border-top-color: #7869DA;
		animation: spin 1s ease-in-out infinite;
		margin-bottom: 15px;
	}

	@keyframes spin {
		to {
			transform: rotate(360deg);
		}
	}

	/* 分页控件 */
	.pagination {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 15px;
		padding: 15px 0;
	}

	.page-btn {
		padding: 5px 15px;
		background-color: rgba(255, 255, 255, 0.1);
		border-radius: 4px;
		cursor: pointer;
		transition: all 0.2s ease;
	}

	.page-btn.disabled {
		opacity: 0.5;
		pointer-events: none;
	}

	.page-btn.pressed {
		background-color: rgba(120, 105, 218, 0.3);
	}

	.page-info {
		color: #666;
	}

	/* 历史记录样式 */
	.filter-bar {
		display: flex;
		gap: 10px;
		margin-bottom: 15px;
	}

	.filter-item {
		flex: 1;
		text-align: center;
		padding: 8px 0;
		background-color: rgba(255, 255, 255, 0.1);
		border-radius: 4px;
		cursor: pointer;
		transition: all 0.2s ease;
	}

	.filter-item.active {
		background-color: #7869DA;
		color: #fff;
	}

	.filter-item.pressed {
		transform: scale(0.95);
	}

	.drops-list {
		padding-bottom: 20px;
	}

	.drop-item {
		display: flex;
		align-items: center;
		padding: 12px;
		background: url("https://img.jingkakeji.com/img/static/lucky/juxing.png");
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		border-radius: 8px;
		margin-bottom: 10px;
		transition: all 0.2s ease;
		opacity: 0;
		transform: translateX(10px);
	}

	.drop-item-animate {
		animation: slideIn 0.5s ease-out forwards;
	}

	@keyframes slideIn {
		to {
			opacity: 1;
			transform: translateX(0);
		}
	}

	.drop-avatar {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 10px;
		flex-shrink: 0;
	}

	.drop-avatar image {
		width: 100%;
		height: 100%;
	}

	.drop-info {
		flex: 1;
		min-width: 0;
	}

	.drop-user {
		display: flex;
		justify-content: space-between;
		margin-bottom: 3px;
	}

	.username {
		font-size: 18rpx;
		font-weight: bold;
	}

	.time {
		font-size: 18rpx;
		color: #999;
	}

	.drop-item-name {
		font-size: 13px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.drop-item-preview {
		width: 50px;
		height: 50px;
		border-radius: 6px;
		overflow: hidden;
		margin-left: 10px;
		flex-shrink: 0;
	}

	.drop-item-preview image {
		width: 100%;
		height: 100%;
	}

	.drop-item-value {
		font-size: 15px;
		font-weight: bold;
		color: #FBDC3B;
		margin-left: 15px;
		flex-shrink: 0;
	}

	/* 底部操作栏 */
	.action-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 15px;
		height: 150rpx;
		background: url("https://img.jingkakeji.com/img/static/lucky/btmbg.png");
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		z-index: 900;
	}

	.open-case-btn {
		width: 100%;
		height: 100rpx;
		padding: 15px 0;
		margin-top: 17rpx;
		background: url("https://img.jingkakeji.com/img/static/lucky/btnbg.png");
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		color: #fff;
		border: none;
		border-radius: 8px;
		font-size: 18px;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		transition: all 0.2s ease;
		box-shadow: 0 4px 15px rgba(120, 105, 218, 0.4);
	}

	.open-case-btn.pressed {
		transform: translateY(2px);
		box-shadow: 0 2px 8px rgba(120, 105, 218, 0.4);
	}

	/* 价格筛选和搜索区域 - 修复按钮高度异常问题 */
	.price-filter {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.price-range {
		display: flex;
		align-items: center;
		gap: 10px;
		height: 38px;
		/* 固定高度，确保按钮对齐 */
	}

	.price-input {
		flex: 1;
		height: 100%;
		padding: 0 8px;
		background-color: rgba(255, 255, 255, 0.1);
		border: 1px solid rgba(255, 255, 255, 0.2);
		border-radius: 4px;
		color: #333;
		box-sizing: border-box;
	}

	.range-separator {
		color: #666;
		display: flex;
		align-items: center;
	}

	/* 筛选按钮样式 - 修复高度异常 */
	.filter-btn {
		height: 100%;
		padding: 0 15px;
		background-color: #7869DA;
		color: #fff;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		transition: all 0.2s ease;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.sort-control {
		display: flex;
		align-items: center;
		gap: 10px;
		height: 38px;
		/* 固定高度 */
	}

	.sort-text {
		color: #666;
		display: flex;
		align-items: center;
	}

	.sort-btn {
		padding: 0 10px;
		background-color: rgba(255, 255, 255, 0.1);
		border-radius: 4px;
		cursor: pointer;
		transition: all 0.2s ease;
		display: flex;
		align-items: center;
		gap: 5px;
		height: 100%;
	}

	.sort-btn.active {
		background-color: #7869DA;
		color: #fff;
	}

	/* 搜索框区域 - 修复按钮高度 */
	.search-box {
		display: flex;
		gap: 10px;
		height: 38px;
		/* 固定高度，确保按钮对齐 */
	}

	.search-input {
		flex: 1;
		height: 100%;
		padding: 0 8px;
		background-color: rgba(255, 255, 255, 0.1);
		border: 1px solid rgba(255, 255, 255, 0.2);
		border-radius: 4px;
		color: #333;
		box-sizing: border-box;
	}

	/* 搜索按钮样式 - 修复高度异常 */
	.search-btn {
		height: 100%;
		padding: 0 15px;
		background-color: #7869DA;
		color: #fff;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		transition: all 0.2s ease;
		display: flex;
		align-items: center;
		gap: 5px;
	}

	/* 解决canvas容器overflow问题 */
	::v-deep .circle-canvas {
		overflow: visible !important;
	}

	::v-deep [canvas-id="luckyCircle"] {
		overflow: visible !important;
	}
</style>